<template>
    <div class="home" :class="{hiddenTop: isHiddenHeader}">
        <!-- 头部 -->
        <header>
            <div class="header-contain">
            <!-- logo -->
            <div class="logo"></div>
            <!-- 未登录的格言 -->
            <p v-if="!isShowHeader" class="motto">
                让天下没有考不了的证书 没有考不起的证书
            </p>
            <!-- 导航 -->
            <nav v-if="isShowHeader" class="nav">
                <a
                    v-for="item in navList"
                    :key="item.title"
                    :class="{ active: activeRoute === item.routeName }"
                    @click="handleSwitchTab(item.routeName)"
                >
                    {{ item.title }}
                </a>
            </nav>
            <!-- 头部中间功能栏 -->
            <div v-if="isShowHeader" class="center-applied">
                <!-- 搜索栏 -->
                <mSearch :types="searchOpts" @search="handleSearch"></mSearch>
            </div>
            <!-- 头部右侧功能栏 -->
            <div class="right-applied">
                <!-- 右侧下载 -->
                <div v-if="!isShowHeader" class="download">
                    <i></i><span>APP下载</span>
                </div>
                <div v-if="isShowHeader" class="studyCenter">
                    <span
                        :class="{ active: activeRoute === 'studyCenter' }"
                        @click="handleSwitchTab('studyCenter')"
                    >
                        学习中心
                    </span>
                </div>
                <div v-if="isShowHeader" class="notice"><i></i></div>
                <div v-if="isShowHeader" class="shopCar" @click="jumpToShoppingCar"><i></i></div>
                <div
                    v-if="isShowHeader"
                    class="user"
                    @click="jumpToUserLoginPage()"
                >
                    <div class="user-toux-box">
                        <img
                            :src="account.toux"
                            v-if="account.toux"
                            alt=""
                            @click="jumpAdmin('personMsg','设置')"
                        />
                    </div>
                    <a-dropdown>
                        <a class="name" @click="e => e.preventDefault()">
                            {{ userName || '未登录' }}
                        </a>
                        <a-menu slot="overlay" v-if="account.id">
                            <a-menu-item>
                                <a @click="jumpAdmin('personMsg','账户信息')">账户信息</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a @click="jumpAdmin('orderManage','订单管理')">订单管理</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a @click="jumpAdmin()">个人中心</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a @click="exitLogin">安全退出</a>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
            </div>
            </div>
        </header>
        <!-- 主体 -->
        <div class="wrapper" :class="{ mid: mid }">
            <transition>
                <router-view @updateUserInfo="getUserMsg"></router-view>
            </transition>
        </div>
        <transition name="popup">
            <div class="popup" @click="closeCoding()" v-if="codingFlag">
                <div class="body">
                    <div class="close"></div>
                    <div class="coding-tip"></div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import mSearch from '../components/searchBar.vue';
import 'ant-design-vue/dist/antd.css';

export default {
    name: 'Index',
    components: {
        mSearch
    },
    data() {
        return {
            account: {},
            activeRoute: '',
            isHiddenHeader: false,
            isShowHeader: true,
            userName: '',
            navList: [
                {
                    title: '首页',
                    routeName: 'homepage'
                },
                {
                    title: '选课中心',
                    routeName: 'courseCenter'
                },
                {
                    title: '免费直播',
                    routeName: 'freeLive'
                },
                {
                    title: '名师课堂',
                    routeName: 'famousCourse'
                },
                {
                    title: '题库',
                    routeName: 'questionBank'
                },
                {
                    title: '小微课堂',
                    routeName: 'littleClassroom'
                },
                {
                    title: '下载APP',
                    routeName: 'download'
                }
            ],
            codingFlag: false,
            searchOpts: [
                {
                    name: '课程',
                    value: 'course'
                },
                {
                    name: '直播',
                    value: 'live'
                }
            ],
            searchText: '',
            mid: true,
        };
    },
    watch: {
        $route: function (newRouter) {
            this.changeScreen(newRouter.name)
            this.getUserMsg();
        }
    },
    mounted() {
        this.changeScreen(this.$route.name)
         this.getUserMsg();
         /*setTimeout(()=>{
            this.codingFlag = true;
         },500);*/
    },
    methods: {
        /*获取用户信息*/
        getUserMsg() {
            this.account = this.$api.getAccount();
            this.userName = this.account.name;
        },
        /*跳转用户登录*/
        jumpToUserLoginPage() {
            if(!this.account.name) {
                this.$router.push({name: 'login'});
            }
        },
        jumpToShoppingCar() {
            if (this.$route.name === 'shoppingCar') {
                return;
            }
            if (this.$util.authLogin()) {
                this.$router.push({name: 'shoppingCar'});
            }
        },
        /* 切换tab */
        handleSwitchTab(name) {
            this.$router.replace({name: name,
            query: {
                t: new Date().getTime()
            }});
        },
        /* 搜索 */
        handleSearch(search) {
            console.log(search);
        },
        jumpAdmin(name, title) {
            this.$router.push({
                name: 'setting', query: {
                    page: name,
                    title: title,
                    t: new Date().getTime()
                }
            })
        },
        exitLogin() {
            this.$api.exitUser();
        },
        changeScreen(activeRoute) {
            this.isShowHeader = !(activeRoute == 'login' ||
                activeRoute == 'register'
            );
            this.isHiddenHeader = (
                activeRoute == 'video'
            )
            this.mid = !(activeRoute == 'login' ||
                activeRoute == 'register' ||
                activeRoute == 'download' ||
                activeRoute == 'video' ||
                activeRoute === 'labIntro'
            )
            this.activeRoute = activeRoute;
        },
        closeCoding() {
            this.codingFlag = false;
        }
    }
};
</script>
<style scoped lang="scss">
.home {
    position: relative;
    &.hiddenTop {
        header {
            display: none;
        }
        &:before {
            display: none;
        }
        .wrapper {
            position: relative;
            padding: 0;
        }
    }
}

.home:before {
    content: '';
    position: fixed;
    top: 0;
    width: 100%;
    height: 200px;
    display: block;
    background: linear-gradient(to bottom, #ffead3, transparent);
    background-size: 100% 100px;
    background-repeat: no-repeat;
    background-position: 0 60px;
}

header {
    position: fixed;
    width: 100%;
    height: 80px;
    font-size: 13px;
    color: #7d7d7d;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    z-index: 999;
    .header-contain {
        display: flex;
        height: 80px;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }
    .logo {
        width: 95px;
        height: 42px;
        margin: 0 0 8px 0;
        flex-shrink: 1;
        background: url(../assets/image/logo.png) no-repeat;
        background-size: 80px;
        background-position: right;
    }

    nav {
        flex: 8 1;
        display: flex;
        margin-top: 3px;

        a {
            flex: 1 1 80px;
            min-width: 75px;
            cursor: pointer;
            color: #7d7d7d;
            text-decoration: inherit;
            text-align: center;

            &.active,
            &:hover {
                color: #ffba00;
                font-weight: bold;
            }
        }
    }

    .center-applied {
        flex: 0 1 250px;
        position: relative;
        height: 30px;
        min-width: 200px;
        padding: 0 8px;
        margin: 0 30px;
        border-left: 0.5px solid rgb(233, 233, 233);
    }

    .right-applied {
        flex: 9;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #999;
        font-size: 13px;
        text-align: center;

        .download {
            flex: 1 0 100px;
            display: flex;
            line-height: 30px;
            padding-right: 8px;
            box-sizing: border-box;
            align-items: center;
            justify-content: flex-end;

            i {
                display: inline-block;
                width: 17px;
                height: 25px;
                margin-right: 8px;
                background: url(../assets/image/icon/icon-download.png) no-repeat;
                background-size: contain;
            }

            span {
                cursor: pointer;
            }

            span:hover {
                color: rgba(0, 106, 222, 1);
            }
        }

        .shopCar {
            flex: 0 1 50px;
            min-width: 35px;

            i {
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url(../assets/image/icon/u99.png) no-repeat;
                background-size: contain;
                cursor: pointer;
            }
        }

        .studyCenter {
            flex: 1 0 100px;
            text-align: right;

            span {
                cursor: pointer;

                &.active {
                    color: #ffa800;
                }
            }
        }

        .notice {
            flex: 0 1 50px;
            min-width: 35px;

            i {
                display: inline-block;
                width: 17px;
                height: 20px;
                background: url(../assets/image/icon/u90.png) no-repeat;
                background-size: contain;
                cursor: pointer;
            }
        }

        .user {
            flex: 0 1 100px;
            display: flex;
            align-items: center;
            min-width: 100px;
            cursor: pointer;

            .user-toux-box {
                flex-shrink: 0;
                display: inline-block;
                width: 37px;
                height: 37px;
                border-radius: 50%;
                margin: 0 8px 8px 0;
                background: url(../assets/image/icon/u92.png) no-repeat;
                background-size: cover;
                background-position: center;
                border: 1px solid #eee;
                cursor: pointer;
                img {
                    display: inline-block;
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }
            }
            .name {
                white-space: nowrap;
            }
            span {
                line-height: 20px;
                font-size: 14px;
                color: #7d7d7d;
            }
        }
    }

    .motto {
        flex: 12;
    }
}

.wrapper {
    padding: 80px 0 0;
    min-height: 100vh;
    min-width: 980px;
    box-sizing: border-box;
}

.wrapper.mid {
    max-width: 1200px;
    margin: 0 auto;
}

ul, li, p, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

.popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;

    .body {
        position: relative;

        .close {
            position: absolute;
            top: -41px;
            right: 13px;
            width: 26px;
            height: 26px;
            background: url("../assets/image/icon/u2148.png") no-repeat;
            background-size: cover;
        }

        .title {
            display: flex;
            width: 890px;
            height: 64px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #006ade;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            align-items: center;
            text-align: center;
            justify-content: center;
        }

        .coding-tip {
            width: 356px;
            height: 400px;
            background: url("../assets/image/sucai/coding.png") no-repeat;
            background-size: contain;
        }
    }
}
</style>
